<template>
  <div class="collapse-wrapper">
    <n-collapse
      arrow-placement="right"
      :default-expanded-names="expandAll ? [name] : []"
    >
      <n-collapse-item :title="name" :name="name">
        <slot></slot>
        <template #header-extra>
          <slot name="header-extra"></slot>
        </template>
      </n-collapse-item>
    </n-collapse>
    <n-divider></n-divider>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
  name: {
    type: String,
  },
  expandAll: Boolean,
});
</script>

<style lang="scss" scoped>
.collapse-wrapper {
  padding-left: 10px;
  :deep() {
    .n-divider:not(.n-divider--vertical) {
      margin: 10px 0;
    }
  }
}
</style>
